body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: white;
    -webkit-text-stroke: 1px black;
    font-size: 60px;
   
}
h1 {
    cursor:pointer;
    transition: all 5s;
    z-index: 100;
}
h1:hover {
    transform: scale(100);
    animation: ys 5s;
}

h1:hover ~ .overlay{
    animation: bj 6s forwards;
 }

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: skyblue;
}

@keyframes bj {
    0% {
        background-color: skyblue;
    }
    90% {
        background-color: white;
    }
    100% {
        background-image: url(../img/ys.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
}
@keyframes ys {
    0% {
       
    }
    50% {
        background-color: white;
    }
    80% {
        background: transparent;
    }
}
